<template>
  <div class="app-container">
    <!-- 授权表单 start -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 套餐分类与数据组合显示 -->
      <el-tab-pane v-for="(item,index) in listKeys" :key="index" label="选择卡券" :name="item+'meal'">
        <div style="text-align: center">
          <el-input
            v-model="keyWords"
            style="margin-bottom: 15px"
            placeholder="输入关键字进行过滤"
          />

          <el-tree
            :ref="item+'meal'"
            :data="list[index]"
            show-checkbox
            :default-checked-keys="ValueMeal"
            node-key="id"
            highlight-current
            :filter-node-method="filterNode"
            :props="defaultProps"
            @current-change="currentChange"
          />
        </div>
      </el-tab-pane>

    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogAuthVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleChange">确 定</el-button>
    </span>

  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 点击遮罩 是否可关闭
    checheds: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogAuthVisible: false,
      total: 0,
      list: [],
      listKeys: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      activeName: '1meal',
      keyWords: '',
      excelList: [],
      // 默认选中套餐
      ValueMeal: []
    }
  },
  watch: {
    keyWords(val) {
      const activeName = this.activeName
      console.log('activeName', activeName, this.$refs)
      this.$refs[activeName][0].filter(val)
    }
  },
  created() {
    if (this.checheds.length > 0) {
      const listKeys = this.checheds.split(',')
      const listArr = {}
      listKeys.forEach((item, index) => {
        this.$set(listArr, item, Number(item))
      })
      this.ValueMeal = Object.values(listArr)
    }
    this.getList()
  },
  methods: {
    handleClick() {},
    handleChange() {
      const that = this
      const arr = []
      that.listKeys.forEach((row, index) => {
        that.$refs[row + 'meal'][0].getCheckedNodes().forEach((item, k) => {
          arr.push(item)
        })
      })
      this.$emit('selectGive', arr)
    },
    currentChange() {},
    filterNode(value, data) {
      console.log('检索', value, data)
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleSelectionChange(val) {
      console.log('传递来的', val)
    },
    handleRequestSuccess() {
    },
    selectType(val) {
      console.log(val)
    },
    getList() {
      const that = this
      that.listLoading = true
      marketIndex().then((response) => {
        that.total = response.data.dataProvider.total
        const list = response.data.dataProvider.allModels
        // 对数据进行分组操作
        // const arr = []
        const m = new Map()
        list.map(item => {
          m.set(item.duration, [...(m.get(item.duration) || ''), item])
        })
        const objGroup = Object.fromEntries(m.entries())
        that.list = Object.values(objGroup)
        that.listKeys = Object.keys(objGroup)

        that.activeName = that.listKeys[0] + 'meal'
        console.log('列表数据层级测试')
        that.listLoading = false
      })
    },
    selectGive(row) {
      this.$emit('selectGive', row)
    }
  }
}
</script>
<style scoped>
.active {
  color: #fff;
  background-color: #409eff;
}
.isActive {
  color: #fff;
  background-color: #9ca1a1;
}
</style>

